<div class="api-doc-component">
  <h3>
    <a
      class="title-fragment"
      [routerLink]=""
      fragment="{{apiDocs.className}}" ngbdFragment
      title="Anchor link to: {{apiDocs.className}}"
    >
      <img src="img/link-symbol.svg" alt="Anchor link to: {{apiDocs.className}}"/>
    </a>
    {{apiDocs.className}}
    <a
      class="github-link"
      (click)="trackSourceClick()"
      href="https://github.com/ng-bootstrap/ng-bootstrap/tree/master/{{apiDocs.fileName}}"
      target="_blank"
      title="Link to Github: {{apiDocs.className}}"
    >
      <img src="img/github.svg" alt="Link to Github {{apiDocs.className}}"/>
    </a>
  </h3>
  <ngbd-api-docs-badge [type]="apiDocs.type"></ngbd-api-docs-badge>
  <p class="lead">{{apiDocs.description}}</p>

  <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
    <section>
      <h4>Properties</h4>
      <table class="table table-sm">
        <tbody>
        <tr *ngFor="let prop of apiDocs.properties">
          <td class="label-cell"><code>{{prop.name}}</code></td>
          <td class="content-cell">
            <p>{{ prop.description }}</p>
            <div class="meta">
              <div>
                <i>Type: </i><code>{{ prop.type }}</code>
              </div>
              <div *ngIf="prop.defaultValue">
                <i>Default value: </i><code>{{prop.defaultValue || '-'}}</code>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </section>
  </ng-template>

  <ng-template [ngIf]="apiDocs.methods && apiDocs.methods.length">
    <section>
      <h4>Methods</h4>
      <table class="table table-sm">
        <tbody>
          <tr *ngFor="let method of apiDocs.methods">
            <td class="label-cell"><code>{{method.name}}</code></td>
            <td class="content-cell">
                <p>
                    <code>{{methodSignature(method)}}</code>
                    <small class="text-muted" title="Return type">=&gt; {{ method.returnType }}</small>
                </p>
                <p>{{ method.description }}</p>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
  </ng-template>
</div>

